<template>
    <div class="box">
        <p class="input">
            <!-- <el-input @input="changeHandler" :model-value="modelValue" placeholder="请输入搜索内容" :prefix-icon="Search" /> -->
            <input type="text" :value="modelValue" @input="changeHandler" placeholder="请输入搜索内容">
        <p v-show="is">
            <el-select v-model="value" @change="selectChangeHandler" class="m-2" placeholder="请选择分类列表" size="large">
                <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
        </p>

        </p>
        <p>
            <el-button type="primary" size="small" @click="searchHandler">搜索</el-button>
            <el-button type="default" size="small" @click="resettingHandler">重置</el-button>
            <el-button size="small" v-show="is" @click="is = !is">收起</el-button>
            <el-button size="small" v-show="!is" @click="is = !is">展开</el-button>
        </p>
    </div>
</template>
<script setup lang='ts'>
import { ref, reactive, inject } from 'vue'
import { Search } from '@element-plus/icons-vue'

const value = ref()
const is = ref(false)
const res = defineProps(['options', 'modelValue','value'])
const emit = defineEmits(['searchHandler', 'update:modelValue','selectChange','resetting'])

const selectChangeHandler = (e:any) => {    
    emit('selectChange',e)
}

const searchHandler = () => {
    emit('searchHandler')
}

const changeHandler = (e: any) => {
    emit('update:modelValue', e.target.value)
}
// 重置阿牛
const resettingHandler = () => {
    emit('resetting')
}
</script>
<style scoped lang='scss'>
.box {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;

    >p:nth-child(1) {
        display: flex;

        input {
            width: 300px;
            height: 40px;
            padding-left: 5px;
            font-size: 14px;
            margin-right: 30px;
        }
    }

    >p:nth-child(2) {
        min-width: 200px;
    }
}
</style>